<template>
	<view class="cu-form-group ">
		<view class="title">{{Title}}</view>
		<picker @change="PickerChange" :value="TabCur" :range="DataList" range-key="Name">
			<view class="picker">
				{{TabCur>-1?DataList[TabCur].Name:'请选择'}}
			</view>
		</picker>
	</view>
</template>

<script>
	import {
		GetObjectValue
	} from "@/utils/comm.js"
	export default {
		name: "selectPicker",
		data() {
			return {
				DataList: [],
				TabCur: -1
			};
		},

		props: {
			value: {
				type: [Number, String],
				default: ''
			},
			Url: {
				type: String,
				default: ""
			},
			Title:{
				type: String,
				default: "类型"
			},
			BindName: {
				type: String,
				default: "Name"
			},
			BindValue: {
				type: String,
				default: "Id"
			},
			Where: {
				type: Object,
				default: {}
			}
		},
		mounted() {
			this.ListApi();
		},
		methods: {
			async ListApi() {
				let {
					Data: {
						Items
					}
				} = await this.$http.PostAsync(this.Url, this.Where);
				let DataList = [];
				
				Items.forEach((item, index) => {
					DataList.push({
						Name: GetObjectValue(item, this.BindName),
						Value: GetObjectValue(item, this.BindValue),
					});
				});
				this.DataList = DataList;
				this.TabCur=this.DataList.findIndex(x=>x.Value==this.value)
				console.log(this.DataList)
			},
			async PickerChange({
				detail: {
					value
				}
			}) {
				this.TabCur=value;
				this.$emit('input', this.DataList[this.TabCur].Value);
				this.$emit('SelectCallBack',  this.DataList[this.TabCur].Value);
			}
		

		}
	}
</script>

<style>

</style>